<template>
    <div class="login-panel">
        <n-card title="登录" hoverable>
            <n-form :model="admin" :rules="rules">
                <n-form-item path="account" label="账号">
                    <n-input v-model:value="admin.account" placeholder="请输入账号" />
                </n-form-item>
                <n-form-item path="password" label="密码">
                    <n-input v-model:value="admin.password" show-password-on="click" type="password" placeholder="请输入密码" />
                </n-form-item>
            </n-form>
            <div class="flex-space-between">
                <n-checkbox v-model:checked="admin.remember">
                    记住我
                </n-checkbox>
                <n-button type="primary" @click="login">
                    登录
                </n-button>
            </div>
        </n-card>
        {{ admin.account }}
        {{ admin.password }}
        {{ admin.remember }}
        <br>
        {{ adminStore }}
    </div>
</template>

<script setup>
import { ref, reactive, inject } from "vue";
import { useRouter, useRoute } from "vue-router";
import { AdminStore } from "../stores/AdminStore";
const router = useRouter()
const route = useRoute()

const axios = inject('axios')
const message = inject('message')

const adminStore = AdminStore()

const admin = reactive({
    account: localStorage.getItem("account") || "",
    password: localStorage.getItem("password") || "",
    remember: !!localStorage.getItem("remember")
});

// 验证
const rules = {
    account: [
        { required: true, message: "请输入账号", trigger: "blur" },
        { min: 3, max: 12, message: "账号长度在3到12个字符", trigger: "blur" }
    ],
    password: [
        { required: true, message: "请输入密码", trigger: "blur" },
        { min: 6, max: 18, message: "密码长度在6到18个字符", trigger: "blur" }
    ],
}

// 登录
const login = async () => {
    if (!admin.account.trim() || !admin.password.trim()) return
    if (admin.account.length < 3 || admin.password.length < 6) return
    try {
        let login_res = await axios.post('/api/admin/login', {
            account: admin.account,
            password: admin.password
        })
        console.log(login_res.data);
        adminStore.id = login_res.data.admin_info.id
        adminStore.account = login_res.data.admin_info.account
        adminStore.token = login_res.data.admin_info.token
        localStorage.setItem("token", adminStore.token)

        // 勾选记住
        if (admin.remember) {
            localStorage.setItem("account", admin.account)
            localStorage.setItem("password", admin.password)
            localStorage.setItem("remember", admin.remember)
        } else {
            localStorage.removeItem("account")
            localStorage.removeItem("password")
            localStorage.removeItem("remember")
        }

        // router.push("/dashboard")
        router.push("/dashboard/article")
        message.success("登录成功")
    } catch (error) {
        console.log(error.response.data);
        message.error("账号或密码有误")
    }
}
</script>

<style lang="scss" scoped>
.login-panel {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 500px;
    transform: translate(-50%, -70%);
}

.flex-space-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>